<template>
  <div class="container">
    <a-card class="general-card" title="查询条件">
      <a-row>
        <a-col :flex="1">
          <a-form :model="searchModel" layout="inline" label-align="right">
            <a-row>
              <a-col flex="auto">
                <a-form-item field="id" label="id">
                  <a-input v-model="searchModel.id" placeholder="请输入id" />
                </a-form-item>
              </a-col>
              <a-col flex="auto">
                <a-form-item field="createTime" label="时间">
                  <a-input
                    v-model="searchModel.createTime"
                    placeholder="请输入时间"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4" :offset="10">
          <a-space>
            <a-button type="primary" @click="search">
              <template #icon><icon-search /></template>
              查询
            </a-button>
            <a-button @click="reset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-divider />
      <a-row style="margin-bottom: 16px">
        <a-col :span="16">
          <a-space>
            <a-button
              v-permission="authority.MALL_ORDERINFO_ADD"
              type="primary"
              @click="add"
            >
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-table
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :data="renderData"
        :columns="columns"
        :bordered="{ wrapper: true, cell: true }"
        @page-change="changeCurrent"
        @page-size-change="changePageSize"
      >
        <template #operations="{ record }">
          <a-space>
            <a-button
              v-permission="authority.MALL_ORDERINFO_EDIT"
              type="text"
              size="small"
              @click="edit(record)"
            >
              <template #icon>
                <icon-edit />
              </template>
              编辑
            </a-button>
            <a-popconfirm
              :content="`此操作将永久删除该条记录, 是否继续?`"
              type="warning"
              @ok="del(record.id)"
            >
              <a-button
                v-permission="authority.MALL_ORDERINFO_DEL"
                type="text"
                size="small"
                status="danger"
              >
                <template #icon>
                  <icon-delete />
                </template>
                删除
              </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <OrderInfoForm
      v-model:visible="formDialogVisible"
      :form-data="formData"
      @refresh="refresh"
    />
  </div>
</template>

<script setup lang="ts">
  import { pickBy } from 'lodash';
  import { Message } from '@arco-design/web-vue';
  import { computed, ref } from 'vue';
  import { usePagination } from 'vue-request';
  import { deleteOrderInfo, getOrderInfoPage } from '@/api/mall/orderinfo';
  import authority from '@/utils/authority';
  import defaultPageOptions from '@/utils/pagination';
  import OrderInfoForm from './components/order-info-form.vue';

  // 初始数据
  const generateModel = () => {
    return {
      id: '',
      createTime: '',
    };
  };

  const searchModel = ref(generateModel());

  const formData = ref({});

  const columns = [
    { title: '成交时间', dataIndex: 'closingTime' },
    {
      title: '评价状态',
      dataIndex: 'commentStatus',
    },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '发货时间', dataIndex: 'deliveryTime' },
    { title: '配送方式', dataIndex: 'deliveryWay' },
    { title: '运费金额', dataIndex: 'freightAmount' },
    { title: '', dataIndex: 'id' },
    { title: 'ip地址', dataIndex: 'ipAddr' },
    { title: '是否支付', dataIndex: 'isPay' },
    { title: '物流id', dataIndex: 'logisticsId' },
    { title: '订单名', dataIndex: 'name' },
    { title: '商户订单号', dataIndex: 'orderNo' },
    { title: '订单类型', dataIndex: 'orderType' },
    {
      title: '支付金额',
      dataIndex: 'paymentAmount',
    },
    { title: '付款时间', dataIndex: 'paymentTime' },
    { title: '支付类型', dataIndex: 'paymentType' },
    { title: '支付方式', dataIndex: 'paymentWay' },
    { title: '收货时间', dataIndex: 'receiverTime' },
    { title: '备注', dataIndex: 'remark' },
    { title: '销售金额', dataIndex: 'salesAmount' },
    { title: '店铺ID', dataIndex: 'shopId' },
    { title: '订单状态', dataIndex: 'status' },
    { title: '支付交易ID', dataIndex: 'transactionId' },
    { title: '最后更新时间', dataIndex: 'updateTime' },
    { title: '用户id', dataIndex: 'userId' },
    { title: '买家留言', dataIndex: 'userMessage' },

    { title: '操作', slotName: 'operations' },
  ];

  const {
    data,
    loading,
    refresh,
    changeCurrent,
    changePageSize,
    current,
    pageSize,
    total,
  } = usePagination(
    (params) => getOrderInfoPage({ ...params, ...pickBy(searchModel.value) }),
    {
      ...defaultPageOptions,
    }
  );

  const renderData = computed(() => data.value?.records || []);

  // 弹出框标记
  const formDialogVisible = ref(false);

  const pagination = computed(() => ({
    current: current.value,
    pageSize: pageSize.value,
    showTotal: true,
    showPageSize: true,
    total: total.value,
  }));

  const search = () => {
    current.value = 1;
  };

  const reset = () => {
    searchModel.value = generateModel();
  };

  const add = () => {
    formDialogVisible.value = true;
    formData.value = {};
  };
  const edit = (e: any) => {
    formDialogVisible.value = true;
    formData.value = { ...e };
  };
  const del = async (id: string) => {
    await deleteOrderInfo(id).then(() => {
      Message.success('删除成功');
      refresh();
    });
  };
</script>

<script lang="ts">
  export default {
    name: 'OrderInfo',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0px 10px 0px 10px;
  }
</style>
